@extends('layouts.master')

@section('title')
@parent
:: Tree view
@stop

@section('styles')
@parent
{{ HTML::style('css/bootstrap-treeview.min.css') }}
@stop

@section('content')
<div class="row">
	<div class="col-sm-4">
		<div id="treeview1"></div>
	</div>
	<div class="col-sm-4">
		<div id="treeview2"></div>
	</div>
	<div class="col-sm-4">
		<div id="treeview3"></div>
	</div>
</div>
@stop

@section('endscript')
@parent
{{ HTML::script('js/bootstrap-treeview.min.js') }}
<script>
var data = [
  {
   text: 'Parent 1',
   nodes: [
    {
     text: 'Child 1',
     nodes: [
      {
       text: 'Grandchild 1'
      },
      {
       text: 'Grandchild 2'
      }
     ]
    },
    {
     text: 'Child 2'
    }
   ]
  },
  {
   text: 'Parent 2', 
    href: "http://www.google.com",
   nodes: [
    {
     text: 'Child 2.1',
     nodes: [
      {
       text: 'Grandchild 2.1.1'
      },
      {
       text: 'Grandchild 2.1.2'
      }
     ]
    },
    {
     text: 'Child 2'
    }
   ]
  },
  {
   text: 'Parent 3'
  },
  {
   text: 'Parent 4'
  },
  {
   text: 'Parent 5'
  }
 ];
 $('#treeview1').treeview({
  color: "#428bca",
  expandIcon: 'glyphicon glyphicon-chevron-right',
  collapseIcon: 'glyphicon glyphicon-chevron-down',
  data: data,
  onNodeSelected: function(event, node) {
        // Your logic goes here
		alert(node.text);
    }
 });
 $('#treeview2').treeview({
  color: "#428bca",
  expandIcon: 'glyphicon glyphicon-chevron-right',
  collapseIcon: 'glyphicon glyphicon-chevron-down',
  showBorder: false,
  showTags: true,
  data: data,
  onNodeSelected: function(event, node) {
        // Your logic goes here
		alert(node.text);
    }
 });
 $('#treeview3').treeview({
  color: "#428bca",
  expandIcon: "glyphicon glyphicon-stop",
  collapseIcon: "glyphicon glyphicon-unchecked",
  nodeIcon: "glyphicon glyphicon-user",
  showTags: true,
  data: data,
  onNodeSelected: function(event, node) {
        // Your logic goes here
		alert(node.text);
    }
 });
</script>
@stop